<template>
  <div class="staff-layout">
    <el-container>
      <el-aside width="200px">
        <div class="logo">园区服务平台</div>
        <el-menu
          :default-active="activeMenu"
          router
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409eff">
          <el-menu-item :index="getDashboardPath">
            <el-icon><HomeFilled /></el-icon>
            <span>工作台</span>
          </el-menu-item>
          <el-menu-item :index="getTaskHallPath">
            <el-icon><Promotion /></el-icon>
            <span>接单大厅</span>
          </el-menu-item>
          <el-menu-item :index="getHistoryPath">
            <el-icon><Check /></el-icon>
            <span>历史记录</span>
          </el-menu-item>
          <el-menu-item index="/staff/profile">
            <el-icon><User /></el-icon>
            <span>个人中心</span>
        </el-menu-item>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header>
          <div class="header-right">
            <span>{{ userInfo.username }}</span>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-icon><Setting /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { 
  HomeFilled,
  List,
  Check,
  Setting,
  User,
  Promotion
} from '@element-plus/icons-vue'

export default {
  name: 'StaffLayout',
  components: {
    HomeFilled,
    List,
    Check,
    Setting,
    User,
    Promotion
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    
    const userInfo = computed(() => store.state.userInfo)
    const activeMenu = computed(() => route.path)
    
    const getDashboardPath = computed(() => {
      const employeeType = userInfo.value.employeeType || localStorage.getItem('employeeType')
      
      switch(employeeType) {
        case '送水工':
          return '/staff/water-dashboard'
        case '保洁工':
          return '/staff/cleaning-dashboard'
        case '维修工':
          return '/staff/repair-dashboard'
        default:
          return '/staff'
      }
    })
    
    const getTaskHallPath = computed(() => {
      const employeeType = userInfo.value.employeeType || localStorage.getItem('employeeType')
      
      switch(employeeType) {
        case '送水工':
          return '/staff/water-task-hall'
        case '保洁工':
          return '/staff/cleaning-task-hall'
        case '维修工':
          return '/staff/repair-task-hall'
        default:
          return '/staff/task-hall'
      }
    })
    
    const getHistoryPath = computed(() => {
      const employeeType = userInfo.value.employeeType || localStorage.getItem('employeeType')
      
      switch(employeeType) {
        case '送水工':
          return '/staff/water-history'
        case '保洁工':
          return '/staff/cleaning-history'
        case '维修工':
          return '/staff/repair-history'
        default:
          return '/staff/history'
      }
    })
    
    const handleCommand = (command) => {
      if (command === 'logout') {
        store.dispatch('logout')
        router.push('/login')
      } else if (command === 'profile') {
        router.push('/staff/profile')
      }
    }
    
    return {
      userInfo,
      activeMenu,
      handleCommand,
      getDashboardPath,
      getTaskHallPath,
      getHistoryPath
    }
  }
}
</script>

<style scoped>
.staff-layout {
  height: 100%;
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #304156;
  color: #bfcbd9;
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  background-color: #304156;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-right span {
  margin-right: 15px;
}

.el-dropdown-link {
  cursor: pointer;
}
</style> 